<template>
  <div
    class="container"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <rz-height />
    <rz-height />
    <rz-height />
    <div  :style="personnel"></div>
    <div id="main5" style="width: 100%; height:345px"></div>
   <rz-height />
    <rz-height />
    <rz-height />
    <rz-height />
    <dv-border-box-1>
      <div class="content">
        <el-row :gutter="20" justify="center">
          <el-col :span="7">
            <div class="totle" :style="personnel1">
              <div class="item1">   <rz-height/>
                <div style="color:#00E0FB;">{{ list3.jyhs }}</div>
                  <rz-height :height="5"/>
                <div>经营户数</div>
                
              </div>
            </div>
            <div class="totle" :style="personnel1">
              <div class="item1">   <rz-height/>
                <div style="color:#00E0FB;">{{ (list3.pcCount/10000).toFixed(2) }}万</div>
                  <rz-height :height="5"/>
                <div>进货总批次数</div>
              </div>
            </div>
            <div class="totle" :style="personnel1">
              <div class="item1">
                <rz-height/>
                <div style="color:#00E0FB;">{{(list3.zlCount/10000000).toFixed(2)}}万</div>
                   <rz-height :height="5"/>
                <div>进货总重量(吨)</div>
              </div>
            </div>
          </el-col>
          <el-col :span="17" style="padding: 0 40px"
            ><div class="title " style="padding:5px 10px" :style="note">产地分析 <span style="color:#D9498B;font-weight:700">TOP10</span></div>
            <dv-capsule-chart
              v-if="!loading"
              :config="config"
              style="width: 100%; height: 320px"
            />
            <!-- <div id="main2" style="width: 100%; height: 300px"></div> -->
          </el-col>
        </el-row>
      </div>
             <div :style="note1">批发市场</div>
    </dv-border-box-1>
    <!-- <dv-border-box-1>
      <div class="content">
        <div class="list">
          <div class="item" v-for="(item,index) in data" :key="index" @click="handle(item,index)">
            <div>单位数:<span style="color:#E6B336"> {{item.unitCount}}</span></div>
            <div>设备数:  <span style="color:#E6B336"> {{item.deviceCount}}</span> </div>
            <img
              style="width: 50px; height: 50px"
              src="@/assets/images/item6.png"
            />
            <div>{{item.bodyIndustry}}</div>
          </div>
        </div>
      </div>
        <div :style="note1">明厨亮灶</div>
    </dv-border-box-1> -->
  </div>
</template>
<script>
// import countTo from "vue-count-to";

import { findFamousChef,statisticsA,purchasebill, } from "@/api/modules/home";
var echarts = require("echarts");
import geoJson from "@/assets/js/city";
export default {
  components:{
  },
  created() {
    this.getList();
    this.getList1()
  },
  props: {
    code: {
      type: String,
      default: "320500",
    },
  },
  // components: {
  //   countTo,
  // },
  data() {
    return {
         config: {
        data: [],
        colors: [ "#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9","#32c5e9"],
        showValue: true,
      },
         note: {
        backgroundImage: "url(" + require("@/assets/images/bg_title.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
      list3:{},
      listA:[],
      index:'',
         personnel: {
        backgroundImage: "url(" + require("@/assets/images/item7.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height:"100px"
      },
       personnel1: {
        backgroundImage: "url(" + require("@/assets/images/item3.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        backgroundPosition: "10%",
      },
           note1: {
         backgroundImage: "url(" + require("@/assets/images/dai_code.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
  left: "50%",
  width:'50%',
  textAlign: "center",
  top: "0",
  transform: "translate(-50%,-50%)",
  color:"white",
  fontSize:'14px',
  height:'45px',
  lineHeight: '44px'
      },
      loading: true,
      value: false,
      data:[],
      myChart: "",
      startVal: 0,
      bodyindustryLIst: [],
      dataMap:{},
    };
  },
  mounted() {
    // this.queryInfo();
    this.pieChart();
    this.getList3()
    this.getList2()
  },
  destroyed() {},
  methods: {
       async getList3() {
      let {data}  = await purchasebill({
	"dataMapList": [
		{
			"key": "access_token",
			"value": "c3puY3A="
		}
	],
	"methodName": "Get_From_Big_Data"
      });
          this.config.data = data.map((x) => {
        return {
          name: x.ProductionFrom,
          value: x.pcCount,
        };
      });
       this.loading = false;
    },

       async getList2() {
     let {data}  = await  purchasebill({
	"dataMapList": [
		{
			"key": "access_token",
			"value": "c3puY3A="
		}
	],
	"methodName": "Get_Pf_Big_Data"
      });
      this.list3=data[0]
    },
      async getList(){
      let { data } = await findFamousChef()
      this.data=data
      console.log(this.data);
    },
    async getList1(){
      let { data } = await statisticsA()
      this.dataMap=data
      // console.log(data);
    },
    pieChart() {
      let that=this
       let valArr = [
        {
          name:1
        }
            ];
      echarts.registerMap("chinamap", geoJson);
       let  option = {
                backgroundColor: 'rgba(0,0,0,0)',

                    geo: {
                map: 'chinamap',
                aspectScale:1, 
                layoutCenter: ['50%', '50%'], 
                layoutSize: '97%',
                silent: true,
                
                // roam: false,
                // z: 0,
                itemStyle: {
                        areaColor: 'rgba(0, 15, 40, 0.5)',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderColor: 'rgba(0, 0, 0, 0.7)',
                        borderWidth: 0,
                
                },
            },
                tooltip: {
                  show: true,
                  formatter:function(a,b,c){
                    // let str=`<div style='font-size:18px;font-weight:700'>${a.name}</div><br/>暂无数据`
                    let str=``
                        if(that.dataMap.some(x=>x.areaName==a.name)){
                          str=`<div style='font-size:18px;font-weight:700'>${a.name}</div><br/>`
                           let data= that.dataMap.filter(x=>x.areaName==a.name)[0].list;
                            data.forEach(x => {
                                str+=`${x.category}:${x.value}<br/>`
                            });
                        }
                      return str
                  },
                   backgroundColor:"rgba(4,39,121,0.9)",
                   textStyle:{
           color:"#00E0FB",

},
                },
             
                series: [{
                  name: 'MAP',
                  type: 'map',
                  map: "chinamap",
                  label: {
                    show: true,
                    color: '#ffffff',

                    
                    borderRadius: 4,
                  },
                   itemStyle: {
        areaColor: "#3196DC", //地图区域的颜色(没有数据时会按照这个颜色显示)
        borderColor: "#09569F", //地图区域的边框
        borderWidth: .9,
    // shadowColor: 'rgba(0, 0, 0, 0.5)',
    // shadowBlur: 10
      },
       emphasis: {
        //高亮的显示设置
        label: {
          color: "#fff",
        },
        itemStyle: {
          areaColor: "#9DE3FF",
        },
      },
                  // itemStyle: {
                  //   color: '#517898',
                  //   shadowColor: 'rgba(0,243,255,0.2)',
                  //   shadowOffsetY: 5,
                  //   shadowBlur: 10,
                  //   borderColor: '#7eaeca',
                  //   borderWidth: 1,
                  //   // opacity: 1,
                  // },

                  aspectScale:1,
                  //长宽比
                  selectedMode: false,
                  //是否允许选中多个区域
                  data: valArr,
                },
                ],
              };
              // myChart.setOption(option);
//       let option = {
//         backgroundColor: "rgba(0,0,0,0)",
//    tooltip: {
//                   show: true,
//                   formatter: '1221'
//                 },
//           // aspectScale: 0.7,
//         geo: {
//           map: "江苏", //上面引入的数据名
//           roam: false, //关闭拖拽
//           label: {
//             //地图显示的地点名
//             show: true,
//             color: "#fff",
//             fontSize: 12,
//           },
//           itemStyle: {
//             areaColor: "#2f62a3", //地图区域的颜色(没有数据时会按照这个颜色显示)
//             borderColor: "#fff", //地图区域的边框
//             borderWidth: 0.6,
//           },
//           emphasis: {
//             //高亮的显示设置
//             label: {
//               color: "#fff",
//             },
//             itemStyle: {
//               areaColor: "#9DE3FF",
//             },
//           },
//           select: {
//             //选中显示设置
//             label: {
//               color: "#fff",
//             },
//             itemStyle: {
//               areaColor: "#9DE3FF",
//             },
//           },
//                tooltip: {
// show:true,
//           formatter: "1212",
//         },
//         },
//       };
      echarts.init(document.getElementById("main5"), "dark").setOption(option);
    },

    // initEcharts() {
    //   this.myChart = echarts.init(document.getElementById("map"));
    //   echarts.registerMap("js", suzhoudata);
    //   var option = {
    //     tooltip: {
    //       show: true,
    //       trigger: "item",
    //       formatter: function (e, t) {
    //         return e.name + "<br/>" + `累计注册${e.value}人`
    //       },
    //     },
    //     visualMap: {
    //       // backgroundColor: "#2A589E",
    //       min: 0,
    //       max: 1000,
    //       left: 0,
    //       bottom: 0,
    //       showLabel: true,
    //       pieces: [
    //         {
    //           gt: 1000,
    //           label: ">1000",
    //           color: "#0033EE",
    //         },
    //         {
    //           gte: 500,
    //           lte: 1000,
    //           label: "500-1000",
    //           color: "#003C9D",
    //         },
    //         {
    //           gte: 100,
    //           lte: 499,
    //           label: "100-499",
    //           color: "#0044BB",
    //         },
    //         {
    //           gte: 0,
    //           lt: 100,
    //           label: "小于100",
    //           color: "#0066FF",
    //         },
    //       ],
    //       show: true,
    //       textStyle: {
    //         color: "#fff",
    //       }
    //     },
    //     series: [
    //       {
    //         data: this.data.cityInfoList.map(x=>{
    //           x.name=x.bodyindustry
    //           x.value=x.count
    //           return x
    //         })
    //         // [
    //         //   {
    //         //     name: "虎丘区",
    //         //     value: 3433434353,
    //         //   },
    //         //   {
    //         //     name: "吴中区",
    //         //     value: 32353434,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "相城区",
    //         //     value: 54353435,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "姑苏区",
    //         //     value: 3512312,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "吴江区",
    //         //     value: 233,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "苏州工业园区",
    //         //     value: 45,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "常熟市",
    //         //     value: 445,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "张家港市",
    //         //     value: 2342,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "昆山市",
    //         //     value: 11000,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         //   {
    //         //     name: "太仓市",
    //         //     value: 2342,
    //         //     info: "10.3万人/1000/0.7%",
    //         //   },
    //         // ]
    //         ,
    //          zoom:1.2,
    //         type: "map",
    //         map: "js",
    //         emphasis: {
    //           areaColor: "#141C34",
    //           borderWidth: 1,
    //           color: "green",
    //           itemStyle: {
    //             borderColor: "#2980b9",
    //             borderWidth: 0,
    //             areaColor: "#00B3FE",
    //           },
    //           label: {
    //             show: true,
    //             fontSize: "11",
    //             color: "#ffffff",
    //           },
    //         },
    //         label: {
    //           show: true,
    //           fontSize: "11",
    //           color: "#ffffff",
    //         },
    //       },
    //     ],
    //   };
    //   this.myChart.setOption(option);
    //   this.myChart.on("mousedown", (params) => {
    //     // params.color = "#2980b9";
    //     this.myChart.setOption(option);
    //   });
    // },
    queryInfo() {
      this.$http
        .queryInfo({
          params: {
            parentCode: this.code,
          },
        })
        .then((res) => {
          this.data = res.data;
      
        });
    },
    findQuantity() {
      this.$http
        .findQuantity({
          params: {
            parentCode: "320500" || this.code,
          },
        })
        .then((res) => {
          this.bodyindustryLIst = res.data;
        });
    },
  },
};
</script>
<style lang="less" scoped>
// .com-container {
//   height: 100%;
//   // .col_wapper {
//   //   color: #4adefe;
//   //   text-align: center;
//   //   font-size: 15px;
//   //   .number {
//   //     font-size: 30px;
//   //     color: #f3db5c;
//   //   }
//   //   .people {
//   //     color: #f3db5c;
//   //   }
//   // }
//   // .center_border {
//   //   border: 1px solid #4adefe;
//   //   border-bottom: none;
//   //   border-top: none;
//   // }
//   // .map {
//   //   position: relative;
//   //   background: url("../../../../assets/images/map.png");
//   //   background-repeat: no-repeat;
//   //   background-size: 100% 100%;
//   //   background-position: center;
//   //   .switch {
//   //     position: absolute;
//   //     left: 0;
//   //     top: 5%;
//   //   }
//   //   .region {
//   //     display: flex;
//   //     flex-direction: column;
//   //     align-items: center;
//   //     justify-content: start;
//   //     color: #fff;
//   //     position: absolute;

//   //     width: 100px;
//   //     height: 100px;
//   //     background: url("../../../../assets/images/mapPotion.png");
//   //     background-repeat: no-repeat;
//   //     background-size: 100% 100%;
//   //     background-position: center;
//   //   }
//   //   .zhangjiagang {
//   //     top: 18px;
//   //     left: 198px;
//   //   }
//   //   .changshu {
//   //     top: 116px;
//   //     left: 316px;
//   //   }
//   //   .taicang {
//   //     top: 143px;
//   //     left: 420px;
//   //   }
//   //   .xiangcehngqu {
//   //     top: 195px;
//   //     left: 236px;
//   //   }
//   //   .kunshan {
//   //     top: 234px;
//   //     left: 360px;
//   //   }
//   //   .gongyeyuan {
//   //     top: 239px;
//   //     left: 294px;
//   //   }
//   //   .gusuqu {
//   //     top: 247px;
//   //     left: 243px;
//   //   }
//   //   .gaoxinqu {
//   //     top: 228px;
//   //     left: 165px;
//   //   }
//   //   .wuzhongqu {
//   //     top: 311px;
//   //     left: 132px;
//   //   }
//   //   .wujiang {
//   //     top: 366px;
//   //     left: 252px;
//   //   }
//   //   .zhangjiagangbaoshui {
//   //     top: 10px;
//   //     left: 295px;
//   //   }
//   // }
//    .dv-border-box-1 {
//     // padding: 40px;
//     .content {
//       padding: 20px 20px;
//       .list {
//         display: flex;
//         justify-content: space-around;
//         .item {
//           flex-basis: 70px;
//           height: 80px;
//           display: flex;
//           flex-direction: column;
//           justify-content: space-evenly;
//           align-items: center;
//           div {
//             text-align: center;
//           }
//         }
//       }
//       .totle {
//         width: 100%;
//         height: 100px;
//         display: flex;
//         justify-content: center;
//         align-items: center;
//       }
//     }
//   }
// }
.container {
  height: 100%;
  color: #ffffff;
    font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .dv-border-box-1 {
    // padding: 40px;
    height: auto;
    .content {
      padding: 30px 20px;
      .list {
        display: flex;
        justify-content: space-around;
        .item {
          flex:1;
          height: 120px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          font-size: 16px;
          div {
            text-align: center;
          }
          // cursor: pointer;
        }
      }
    }
      .totle {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        .item1 {
          height: 100%;
          display: flex;
          justify-content:start;
          align-items: center;
          flex-direction: column;
          :nth-child(2) {
            color: green;
            font-size: 20px;
          }
        }
      }
  }
     /deep/ .unit-label{
    display: none;
  }

}
</style>
